<template>
	<view class="homePages">
		<view class="top-img">
			<view class="top-txt">
				<view class="title">{{mineProgramTitle || '新助邦'}}</view>
				<view class="tips">{{mineProgramSubTitle || '考研择校上岸之神'}}</view>
			</view>
			<video @timeupdate="videoPlay" class="videoClass" autoplay loop muted :controls="false" :show-progress="false"
				:show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
				:enable-progress-gesture="false" object-fit="fill"
				src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/12/17/b6f5130e00a647c0a700abe68e2d552f.mp4"></video>
			<view :class="{'videoMaskAn':!isVideoMask}" class="videoMask">
			</view>

			<!-- <image src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/top-home.png"></image> -->
		</view>
		<view class="contents">
			<view class="message">
				<view class="message-item flex alignCenter" @click.stop="toMessage">
					<view class="mark font10">最新</view>
					<view class="font12">你所有的消息都可以从这里点击查看哦~</view>
				</view>
			</view>
			<view class="box5">
				<view class="titles">调剂工具箱</view>
				<view class="items flex alignCenter flexWrap justify-between">
					<view class="item" v-for="(btnItem,i) in btnGroups[1].btns" :key="i" @click="operClick(btnItem)">
						<view v-if="btnItem.isShow">
							<image :src="btnItem.icon" mode="widthFix"></image>
							<view class="zxgjx">{{btnItem.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="titles">择校工具箱</view>
				<view class="item1 flex alignCenter flexWrap">
					<view class="item" v-for="(btnItem,i) in operArr" :key="i" @click="operClick(btnItem)">
						<view v-if="btnItem.isShow">
							<image :src="'https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/'+btnItem.icon"
								mode="widthFix"></image>
							<view class="zxgjx">{{btnItem.title}}</view>
						</view>
					</view>
				</view>

				<view class="item2 flex alignCenter flexWrap">
					<view class="item" v-for="(btnItem,i) in btnGroups[0].btns" :key="i" @click="operClick(btnItem)">
						<view v-if="btnItem.isShow">
							<image :src="'https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/'+btnItem.icon"
								mode="widthFix"></image>
							<view class="title">{{btnItem.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 悬浮按钮 -->
			<view class="floatBtn" @click="gotoCustomized">
				<view class="flex alignCenter">
					<view class="image">
						<image src="https://image.alhelp.net/uploads/20231104/dbf1bdf1eed21a3744f144fec93210f9.png" mode="widthFix">
						</image>
					</view>
					<view class="font12 text-white u-m-l-20">免费咨询</view>
				</view>
			</view>
			<!-- <img class="floatBtn" @click="gotoCustomized" src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/12/17/7eb3be51c982466ea57066c6efc6c8ea.png" mode="widthFix" /> -->
		</view>
		<!-- #ifdef APP-PLUS -->
		<uni-versionnew :renewData="renewData"></uni-versionnew>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<uni-iosprivacy v-if="canShowIos" @tourClick="canShowIos=false"></uni-iosprivacy>
		<!-- #endif -->
		<uni-login @closeLogin="closeLogin" :loginShow="isLoading"></uni-login>
	</view>
</template>

<script>
	import {
		getMineProgram
	} from "@/api/mine.js"
	import {
		getAppVersion,
		bindUser
	} from "@/api/index.js"
	import {
		updateVersion,
		modeJudge,
		getNoRead,
		navigateLoginPage
	} from "@/utils/common.js"

	import uniLogin from '@/components/uni-login/uni-login.vue'

	export default {
		components: {
			uniLogin
		},
		data() {
			return {
				isVideoMask: true,
				mineProgramTitle: "",
				mineProgramSubTitle: "",
				isLoading: false,
				show: true,
				renewData: {},
				current: 0,
				operArr: [{
						title: '动态估分',
						icon: 'img7.png',
						bg: 'rgba(245, 249, 254, 1)',
						imgBg: 'rgba(219,238,255,1)',
						color: '#7A90CA',
						// url: '',
						url: '/pages/toolbox/trendsScore/index',
						isChain: false, //是否外链
						isShow: true, //是否显示
					},
					// {
					// 	title: 'AI择校',
					// 	icon: 'img8.png',
					// 	// bg: 'rgba(241,251,252,1)',
					// 	bg: 'rgba(241, 251, 252, 1)',
					// 	imgBg: 'rgba(211,242,244,1)',
					// 	color: '#5D9BA0',
					// 	appId: 'wx630c8301c14824e2',
					// 	isChain: true, //是否外链
					// 	originalId: 'gh_2c5bb46819fe',
					// 	isShow: true, //是否显示
					// },
					{
						title: '择校报告',
						icon: 'img10.png',
						// bg: 'rgba(255,250,247,1)',
						bg: 'rgba(255, 250, 247, 1)',
						imgBg: 'rgba(246,233,221,1)',
						color: '#B49883',
						url: '/pages/toolbox/chooseSchool/index',
						isChain: false, //是否外链
						isShow: true, //是否显示
					},
				],
				// 是否显示ios的隐私弹窗
				canShowIos: false,
				btnGroups: [{
						title: '选专业工具箱',
						btns: [{
								name: '按考试科目',
								url: '/pages/toolbox/chooseMajor/subject/index',
								icon: 'icon1.png',
								bg: 'rgba(255,252,248,1)',
								isChain: false, //是否外链
								isShow: true, //是否显示
							},
							{
								name: '按研究方向',
								url: '/pages/toolbox/chooseMajor/direction/index',
								icon: 'icon2.png',
								bg: 'rgba(248,250,255,1)',
								isChain: false,
								isShow: true, //是否显示
							},
							{
								name: '查专业',
								url: '/pages/toolbox/chooseMajor/major/index',
								icon: 'icon3.png',
								bg: 'rgba(251,248,255,1)',
								isChain: false,
								isShow: true, //是否显示
							},
							{
								name: '找院校',
								url: '/pages/toolbox/chooseMajor/school/index',
								icon: 'icon4.png',
								bg: 'rgba(250,205,145,0.3)',
								isChain: false,
								isShow: true, //是否显示
							},
							{
								name: '多条件查询',
								url: '/pages/toolbox/chooseMajor/condition/index',
								icon: 'icon5.png',
								bg: 'rgba(255,243,243,1)',
								isChain: false,
								isShow: true, //是否显示
							},
							{
								name: '对比库',
								url: '/pages/toolbox/comparisonLibrary/index',
								icon: 'icon6.png',
								bg: 'rgba(241,245,255,1)',
								isShow: true, //是否显示
							},
							// {
							// 	name: '热门排行榜',
							// 	url: '/pages/toolbox/chooseMajor/hotList/index',
							// 	icon: 'icon7.png',
							// 	isChain: false,
							// 	isShow: true, //是否显示
							// }
						]
					},
					{
						title: '调剂工具箱',
						btns: [{
								name: '智慧调剂',
								url: '/pages/toolbox/adjustReport/index',
								icon: 'https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/12/17/0c622d6d7cbe4d7b9e4cd55f36c2b379.png',
								isChain: false, //是否外链
								isAdjust: true, //是否调剂相关
								isShow: true, //是否显示
							},
							{
								name: '最新信息',
								url: '/pages/school/news/news',
								icon: 'https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/12/17/5499855d4e8c49198aabc8e71138f783.png',
								isChain: false, //是否外链
								isAdjust: true, //是否调剂相关
								isShow: true, //是否显示
							},
							{
								name: '调剂对比库',
								url: '/pages/toolbox/comparisonLibrary/index',
								icon: 'https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/12/17/f9ca820b58a04e0bb6d57bf47fd17262.png',
								isChain: false,
								isAdjust: true,
								isShow: true, //是否显示
							}
						]
					},
					{
						title: '学习工具箱',
						btns: [{
								name: '词邦',
								url: '',
								icon: 'https://image.alhelp.net/uploads/20231104/0e225b5580201c66cad22257ff2dc6e7.png',
								isChain: true,
								appId: 'wx04f4f6c8a803efc3', //appid
								isApp: true,
								originalId: 'gh_f81776fab5c0', //原生id
								isShow: true, //是否显示
							},
							{
								name: '数书通',
								url: '',
								icon: 'https://image.alhelp.net/uploads/20231104/226cd25d365982a268d1075f13d3a147.png',
								isChain: true,
								appId: 'wxeb0932e8c63aa2e3',
								originalId: 'gh_08193d13f466',
								isShow: true, //是否显示
							},
						]
					},
				],
				extendId: ''
			}
		},
		watch: {
			isLoading(newV) {
				if (newV) {
					uni.hideTabBar();
				} else {
					uni.showTabBar();
				}
			}
		},
		onLoad(options) {
			// 推广官扫码进入小程序
			// #ifdef MP
			if (options.scene) {
				// 扫码进入,获取二维码参数
				let scene = decodeURIComponent(options.scene).split('=')[1];
				uni.setStorageSync("shareUserId", scene);
				if (uni.getStorageSync('token')) {
					let param = {
						flowMasterId: scene
					}
					bindUser(param).then((res) => {
						if (res.code == 100000) {

						}
					})
				}
				console.error('小程序扫码进入', options, scene, uni.getStorageSync("shareUserId"))
			}
			// #endif
			// #ifdef APP-PLUS
			// 未同意隐私政策不能调用一些api
			modeJudge().then((canNext) => {
				if (canNext) {
					getAppVersion().then((res) => {
						if (res.code == 100000) {
							this.compareVersion(res.data)
						}
					})
				}
			})
			// #endif
			// #ifdef APP-PLUS
			if (uni.getDeviceInfo().deviceBrand == 'apple') {
				// 苹果设备 去到隐私政策弹框页面
				if (!plus.runtime.isAgreePrivacy() || !uni.getStorageSync('canShowIos')) {
					this.canShowIos = true
				}
			}
			// #endif
		},
		onShow() {
			this.getMineProgramInfo();
			// #ifdef MP-WEIXIN
			// 获取未读消息
			if (!uni.getStorageSync('token')) return;
			getNoRead()
			// #endif
		},
		onHide() {},
		onUnload() {},
		methods: {
			videoPlay(e) {
				if (this.isVideoMask) {
					this.isVideoMask = !this.isVideoMask;
				}
			},
			getMineProgramInfo() {
				let memberId = uni.getStorageSync("shareUserId") || '-1';
				uni.showLoading({
					mask: true
				});
				getMineProgram(memberId).then(res => {
					if (res.code == 100000) {
						if (res.data && res.data.miniProgramName) {
							this.mineProgramTitle = res.data.miniProgramName;
							this.mineProgramSubTitle = res.data.introductionMiniPrograms;
							uni.setStorageSync('mineProgramSys',
								JSON.stringify({
									mineProgramTitle: this.mineProgramTitle,
									mineProgramSubTitle: this.mineProgramSubTitle,
									logo: res.data.institutionLogo
								})
							)
						}
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			closeLogin() {
				this.isLoading = false;
			},
			// 版本对比
			compareVersion(newV) {
				updateVersion(newV).then((v) => {
					console.log('v', v)
					uni.showTabBar()
					if (v) {
						uni.hideTabBar()
						this.renewData = v
					}
				})
			},
			// 消息
			toMessage() {
				uni.navigateTo({
					url: '/pages/message/message'
				})
			},
			// 操作台
			operClick(item) {
				if (item.isChain) {
					// #ifdef MP-WEIXIN
					// 打开第三方小程序   小程序跳小程序（AI择校（报录比）的专门的跳转小程序）
					let token = uni.getStorageSync('token') ? 'Bearer ' + uni.getStorageSync('token') : null;
					uni.navigateToMiniProgram({
						appId: item.appId,
						path: 'pages/interactive/homePage/index?extendId=' + this.extendId,
						envVersion: "develop", //release 正式版，trial 体验版，develop 开发板
						extraData: {
							auth: token
						},
						success: res => {
							// 打开成功
							console.log("打开成功", res);
						},
						fail: err => {
							console.log(err);
						}
					});
					return
					// #endif

					// #ifdef APP-PLUS
					// app跳小程序
					plus.share.getServices((res) => {
						var sweixin = null;
						for (var i = 0; i < res.length; i++) {
							var t = res[i];
							if (t.id == 'weixin') {
								sweixin = t;
							}
						}
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: item.originalId, //原始id
								type: 0, //0-正式版；1-测试版；2-体验版；默认值为0；
								// path: ""
							})
						}
					}, function(res) {
						console.log(JSON.stringify(res))
					});
					// #endif

					// #ifdef H5
					uni.showToast({
						title: '当前环境不支持微信操作',
						icon: 'none',
						duration: 2000
					})
					// #endif		
					return
				}

				if (!uni.getStorageSync('token')) {

					// #ifdef MP-WEIXIN
					this.isLoading = true;
					// #endif
					// #ifndef MP-WEIXIN
					navigateLoginPage()
					// #endif
					return
				}
				//跳转路径为空时，提示当前功能正在开发中。。。
				if (!item.url) {
					console.log(item)
					if (item.isAdjust) {
						return uni.showToast({
							title: '调剂的相关信息，会在每年初试结束后开放查看权限',
							icon: 'none',
							duration: 3000,
							// position: 'top'
						})
					}
					return uni.showToast({
						title: '程序猿正在努力开发中···',
						icon: 'none',
						duration: 2000,
						// position: 'top'
					})
				}
				uni.navigateTo({
					url: item.url
				})
				// console.log(item);
			},
			gotoCustomized() {
				uni.navigateTo({
					url: '/pages/toolbox/chooseMajor/customized/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.videoClass {
		width: 400rpx;
		height: 400rpx;
		background-color: #fff;
		position: absolute;
		right: 40rpx;
		top: 140rpx;
		z-index: 10;
		border: none !important;
	}

	.videoMask {
		width: 400rpx;
		height: 400rpx;
		background-color: #fff;
		position: absolute;
		right: 40rpx;
		top: 140rpx;
		z-index: 20;
	}

	.videoMaskAn {
		animation: hide .1s linear;
		animation-fill-mode: forwards;
	}

	@keyframes hide {
		0% {
			opacity: 1;
		}

		25% {
			opacity: .75;
		}

		50% {
			opacity: .5;
		}

		75% {
			opacity: .25;
		}

		100% {
			opacity: 0;
		}
	}

	.homePages {
		/* #ifdef MP */
		padding: 80rpx 0 0;
		box-sizing: border-box;
		/* #endif */
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		position: relative;
	}

	.top-img {
		width: 100%;
		height: 620rpx;

		.top-txt {
			font-size: 48rpx;
			font-weight: 600;
			color: #2E383E;
			line-height: 68rpx;
			margin-left: 36rpx;
			position: absolute;
			top: 182rpx;
			/* #ifdef MP */
			top: 262rpx;

			/* #endif */
			.tips {
				font-size: 26rpx;
				font-weight: 400;
				color: #687278;
				line-height: 36rpx;
				margin-top: 10rpx;
			}
		}

		// image {
		// 	width: 100%;
		// 	height: 620rpx;
		// }
	}

	.contents {
		position: absolute;
		top: 370rpx;
		/* #ifdef MP */
		top: 450rpx;
		/* #endif */
		width: 100%;
		z-index: 20;
	}

	.box1,
	.box2,
	.box3,
	.box5,
	.message {
		margin: 0 36rpx;
		margin-bottom: 36rpx;
		border-radius: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 36rpx 0rpx rgba(18, 19, 20, 0.02), 0rpx 2rpx 11rpx 0rpx rgba(0, 0, 0, 0.05);
	}

	.message {
		// margin: 0 36rpx;
		margin-bottom: 0px;
		background: $colorMain;
		height: 110rpx;
		box-shadow: 0rpx 2rpx 43rpx 0rpx rgba(27, 29, 31, 0.1), 0rpx 0rpx 36rpx 0rpx rgba(18, 19, 20, 0.02), 0rpx 2rpx 11rpx 0rpx rgba(0, 0, 0, 0.05);

		.message-item {
			padding-top: 18rpx;
		}

		.mark {
			justify-content: center;
			line-height: 1em;
			width: 62rpx;
			height: 34rpx;
			background: #344154;
			border-radius: 8rpx;
			margin-left: 30rpx;
			// font-size: 18rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 34rpx;
			margin-right: 10rpx;

		}
	}

	.box1 {
		// margin: 0 36rpx;
		// margin-top: 10rpx;
		// margin-top: -80rpx;
		/* #ifdef H5 */
		margin-top: -80rpx;
		/* #endif */
		padding-bottom: 22rpx;

		.titles {
			font-size: 30rpx;
			font-weight: 600;
			color: #2E383E;
			// margin-bottom: 28rpx;
			margin-left: 28rpx;
			padding-top: 28rpx;
			line-height: 46rpx;
		}

		.item1 {
			height: 188rpx;
			text-align: center;

			.item {
				width: 226rpx;
			}

			image {
				width: 102rpx;
				height: 102rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 8rpx;
			}

			.title {
				font-size: 26rpx;
				color: #2E383E;
				line-height: 36rpx;
			}
		}

		.item2 {
			background: #F9F9F9;
			border-radius: 14rpx;
			margin: 0 22rpx;
			text-align: center;

			.item {
				width: 158rpx;
				margin: 22rpx 0;
			}

			image {
				width: 72rpx;
				height: 72rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 8rpx;
			}

			.title {
				font-size: 26rpx;
				color: #687278;
				line-height: 36rpx;
			}
		}
	}

	.box2 {
		// margin: 0 36rpx;
		height: 398rpx;
		background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/bg1.png') no-repeat;
		background-size: cover;
		background-repeat: no-repeat;

		.title {
			font-size: 30rpx;
			font-weight: 600;
			color: #344154;
			line-height: 40rpx;
			margin-bottom: 14rpx;
		}

		.tips {
			font-size: 22rpx;
			font-weight: 400;
			color: #687278;
			line-height: 30rpx;
		}

		.top-box {
			justify-content: space-between;
			margin: 0 18rpx 16rpx;
			padding-top: 48rpx;

			image {
				width: 100rpx;
				height: 54rpx;
				position: absolute;
			}
		}

		.left-box {
			width: 324rpx;
			height: 160rpx;
			background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/box5.png') no-repeat;
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;

			.title {
				align-items: flex-end;
				margin-left: 21rpx;
				padding-top: 36rpx;
			}

			.tips {
				margin-left: 21rpx;
			}

			image {
				left: 244rpx;
				top: -30rpx;
			}
		}

		.right-box {
			margin-left: -20rpx;
			width: 326rpx;
			height: 160rpx;
			background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/box4.png') no-repeat;
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;

			.title {
				align-items: flex-end;
				margin-left: 46rpx;
				padding-top: 36rpx;
			}

			.tips {
				margin-left: 46rpx;
			}

			image {
				left: 230rpx;
				top: -30rpx;
			}
		}

		.bottom-box {
			margin: 0 18rpx;
			width: 634rpx;
			height: 148rpx;
			background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/box6.png') no-repeat;
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;

			.title {
				align-items: flex-end;
				margin-left: 21rpx;
				padding-top: 20rpx;
			}

			.tips {
				margin-left: 21rpx;
			}

			image {
				width: 100rpx;
				height: 54rpx;
				margin-left: 8rpx;
				// left: 230rpx;
				// top: -30rpx;
			}
		}

	}

	.box3 {
		height: 380rpx;

		.icon {
			width: 104rpx;
			height: 72rpx;
			position: absolute;
			left: 28rpx;
			margin-top: -18rpx;
		}

		.boxs {
			padding: 20rpx;
			justify-content: space-between;

			.title {
				font-size: 30rpx;
				font-weight: 600;
				color: #2E383E;
				line-height: 40rpx;
				margin-left: 22rpx;
			}

			.tips {
				font-size: 20rpx;
				font-weight: 400;
				color: #9C9C9C;
				line-height: 32rpx;
				margin-left: 22rpx;
			}

			.left-box {
				width: 290rpx;
				height: 340rpx;
				background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/box1.png') no-repeat;
				background-size: cover;
				background-repeat: no-repeat;

				.title {
					margin: 58rpx 0 10rpx 24rpx;
				}

				.btn {
					margin-top: 36rpx;
					margin-left: 22rpx;
					width: 106rpx;
					height: 40rpx;
					background: #2E383E;
					border-radius: 24rpx;

					font-size: 20rpx;
					font-weight: 600;
					color: #FFCC00;
					line-height: 1em;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				image {
					margin-left: 8rpx;
					width: 8rpx;
					height: 10rpx;
				}
			}

			.right-box {
				image {
					margin-left: 10rpx;
					width: 40rpx;
					height: 30rpx;
				}

				.title {
					padding: 22rpx 0 10rpx 0;
				}

				.top {
					width: 338rpx;
					height: 163rpx;
					background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/box2.png') no-repeat;
					background-size: cover;
					background-repeat: no-repeat;
				}

				.bottom {
					width: 338rpx;
					height: 163rpx;
					background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/box3.png') no-repeat;
					background-size: cover;
					background-repeat: no-repeat;
					margin-top: 16rpx;

					.title {
						padding: 32rpx 0 16rpx 0;
					}

				}
			}
		}
	}

	.box4 {
		// margin: 0 36rpx;
		height: 318rpx;
		background: url('https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/homePage/bg2.png') no-repeat;
		background-size: cover;
		background-repeat: no-repeat;
		margin-top: 24rpx;
		padding-left: 60rpx;
		position: relative;
		padding-bottom: 34rpx;

		.icon {
			width: 100rpx;
			height: 102rpx;
			position: absolute;
			right: 72rpx;
			top: 0px;
		}

		.title {
			// margin-left: 60rpx;
			padding-top: 42rpx;
			margin-bottom: 16rpx;
			font-size: 30rpx;
			font-weight: 700;
			color: #373E43;
			line-height: 40rpx;

			// justify-content: ;
			.btn {
				// margin-top: 36rpx;
				margin-left: 22rpx;
				width: 106rpx;
				height: 40rpx;
				background: #2E383E;
				border-radius: 24rpx;

				font-size: 20rpx;
				font-weight: 600;
				color: #FFCC00;
				line-height: 1em;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			image {
				margin-left: 8rpx;
				width: 8rpx;
				height: 10rpx;
			}
		}

		.box {
			margin-right: 62rpx;
			background: #fff;
			background: #FFFFFF;
			backdrop-filter: blur(10px);
			border-radius: 30rpx;
			line-height: 1em;
			height: 180rpx;

			.tips {
				font-size: 22rpx;
				font-weight: 400;
				color: #344154;

				// line-height: 48rpx;
				.bold {
					margin-left: 10rpx;
				}

				.dot {
					width: 10rpx;
					height: 10rpx;
					background: #FFDF5F;
					border-radius: 2rpx;
					margin: 0 8rpx 0 16rpx;
					transform: rotate(180deg);
				}
			}

			image {
				height: 12rpx;
				display: block;
				margin: 4rpx 0 4rpx 140rpx;
			}

			.item {
				// height: 40rpx;
			}

			.item:first-child {
				padding-top: 34rpx;

				image {
					margin-left: 320rpx;
				}
			}

			.item:last-child {
				image {
					margin-left: 58rpx;
				}

				.bold {
					margin-left: 0px;
				}
			}
		}

	}

	.box5 {
		/* #ifdef H5 */
		margin-bottom: 120rpx;
		/* #endif */

		// margin-top: 10rpx;
		// padding-bottom: 34rpx;
		margin-top: -40rpx;
		padding-bottom: 22rpx;

		.titles {
			font-size: 30rpx;
			font-weight: 600;
			color: #2E383E;
			margin-bottom: 28rpx;
			margin-left: 28rpx;
			padding-top: 28rpx;
			line-height: 46rpx;
		}

		.items {
			// background: #F9F9F9;
			// border-radius: 14rpx;
			margin: 0 22rpx;
			text-align: center;

			.item {
				width: 158rpx;
				// margin: 22rpx 0;
			}

			image {
				width: 102rpx;
				height: 102rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 8rpx;
			}

			.title {
				font-weight: 400;
				font-size: 26rpx;
				color: #687278;
				line-height: 36rpx;
			}
		}

	}

	.top-btns {
		position: sticky;
		margin-top: -60rpx;
		z-index: 1;
		// padding: 0 30rpx;
		// display: felx;
		// justify-content: space-around;

		.box-item {
			// width: 184rpx;
			height: 132rpx;
			// border-radius: 36rpx;
			text-align: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-shadow: 6rpx 6rpx 6rpx rgba(215, 215, 215, 0.62);
			flex: 1;
			margin-right: 30rpx;
			border-radius: 40rpx;
			// margin-right: 30rpx;
		}

		.box-item:last-child {
			margin-right: 0;
		}

		.title {
			color: #333;
			line-height: 1em;
			padding-top: 20rpx;
			// padding: 16rpx 20rpx;
			// font-size: 32rpx;
		}

		.box-icon {
			// position: static;
			// background: #fff;
			// width: 100rpx;
			// height: 100rpx;
			// border-radius: 50%;
			// text-align: center;
			// box-shadow: 6rpx 6rpx 6rpx 6rpx rgba(215, 215, 215, 0.62);
		}

		.bg-icon {
			width: 128rpx;
			height: 44rpx;
			position: absolute;
			margin-left: 74rpx;
			border-top-left-radius: 100%;
			margin-top: 10rpx;
		}

		image {
			margin-top: 20rpx;
			width: 50rpx;
			height: 50rpx;
			// text-align: right;
			// position: absolute;
			// margin-left: 134rpx;
			// margin-top: -6rpx;


		}

	}

	.floatBtn {
		&>view {
			width: 140rpx;
			height: 70rpx;
			background: linear-gradient(to top, rgba(251, 202, 99, 1.0) 20%, rgba(255, 223, 96, 1.0));
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .1);
			border-radius: 70rpx;
			text-align: center;
			position: fixed;
			right: 60rpx;
			bottom: 8vh;
			z-index: 3000;
			// padding:20rpx;
			box-sizing: border-box;

			.image {
				position: absolute;
				top: -60rpx;
				left: 30rpx;

				image {
					width: 80rpx;
					height: 64rpx;
				}
			}
		}
	}

	.zxgjx {
		font-size: 26rpx;
		font-weight: 700;
		color: #2E383E;
		line-height: 36rpx;
	}
</style>